<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,canvas{margin: 0;padding: 0;}
        #canvas {
            width: 600px; height:350px;
            border: 1px solid #ccc;
            margin: 5px auto; display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600px" height="350px"></canvas>
    <script>
        let cvs=document.getElementById('canvas');
        let ctx=cvs.getContext('2d');
        cvs.addEventListener('touchstart',(event)=>{
            console.log('touchstart..')
            console.log(event)
            console.log(event.touches[0].pageX+":"+event.touches[0].pageY)
            //获取当前canvas元素的left于top
            let l=canvas.getBoundingClientRect().left
            let t=canvas.getBoundingClientRect().top
            let x=event.touches[0].pageX-l;
            let y=event.touches[0].pageY-t;
            console.log('x:'+x+"   y:"+y);
            ctx.strokeStyle='#000';
            ctx.beginPath();
            ctx.moveTo(x,y);
        });
        cvs.addEventListener('touchmove',(event)=>{
            let l=canvas.getBoundingClientRect().left
            let t=canvas.getBoundingClientRect().top
            let x=event.touches[0].pageX-l;
            let y=event.touches[0].pageY-t;
            ctx.lineTo(x,y);
            ctx.stroke();
            event.preventDefault();
        });
    </script>
</body>
</html>